@charset "utf-8";
@import "reset";
@import "animate";
$font-size: 40; //根节点的字体大小
@function r($px) {
    @return $px/$font-size*1rem; //计算rem
}

html,
body {
    width: 100%;
    height: 100%;
}

@mixin imgs {
    position: absolute;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
    left: -9999px;
    margin: auto;
}

.yiny {
    animation: yiny 5s linear both infinite;
}

//银联
.unionpay {
    width: 100%;
    height: 100%;
    background: url(../img/H5-01.png) 100%/100% no-repeat;
    background-size: 110%;
    //音乐
    .music{
        width: r(46);
        height: r(46);
        position: absolute;
        bottom: r(16);
        right: r(16);
        border-radius: 50%;
        overflow: hidden;
        z-index: 20;
        img{
            width: 100%;
        }
    }
    //验证码
    .VerificationCode {
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: r(110);
        bottom: r(81);
        box-sizing: border-box;
        width: r(530);
        margin: 0 auto;
        //音乐节
        .MusicFestival {
            width: 100%;
            height: r(282);
            margin: 0 auto;
            position: relative;
            z-index: 10;
            .logo1 {
                width: r(439);
                height: r(243);
                position: absolute;
                left: 0;
                right: 0;
                top: r(4);
                overflow: hidden;
                margin: 0 auto;
                img {
                    width: 100%;
                }
            }
            .logo2 {
                width: r(142);
                height: r(134);
                position: absolute;
                right: 0;
                top: r(115);
                overflow: hidden;
                transform: translateX(100%);
                img {
                    width: 100%;
                }
            }
            .logo3 {
                width: r(65);
                height: r(59);
                position: absolute;
                left: r(19);
                top: r(202);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .logo4 {
                width: r(59);
                height: r(51);
                position: absolute;
                left: r(153);
                top: r(29);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .logo5 {
                width: r(52);
                height: r(66);
                position: absolute;
                left: r(62);
                top: r(24);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .logo6 {
                width: r(26);
                height: r(21);
                position: absolute;
                left: r(1);
                top: r(55);
                overflow: hidden;
                transform: translateX(-300%);
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .logo7 {
                width: r(26);
                height: r(21);
                position: absolute;
                left: r(68);
                bottom: r(0);
                overflow: hidden;
                transform: translateX(-500%);
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .logo8 {
                width: r(26);
                height: r(21);
                position: absolute;
                right: r(8);
                top: r(171);
                overflow: hidden;
                transform: translateX(200%);
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .logo9 {
                width: r(12);
                height: r(17);
                position: absolute;
                left: r(98);
                top: r(0);
                overflow: hidden;
                transform: translateY(-500%);
                img {
                    height: 100%;
                    @include imgs;
                }
            }
            .logo10 {
                width: r(18);
                height: r(22);
                position: absolute;
                right: r(20);
                top: r(50);
                overflow: hidden;
                transform: translateY(-500%);
                img {
                    height: 100%;
                    @include imgs;
                }
            }
            .logo11 {
                width: r(34);
                height: r(35);
                position: absolute;
                right: r(77);
                top: r(27);
                overflow: hidden;
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .logo12 {
                width: r(39);
                height: r(27);
                position: absolute;
                left: r(244);
                top: r(38);
                overflow: hidden;
                img {
                    width: 100%;
                    @include imgs;
                }
            }
        }
        //錄音
        .TheRecording {
            width: r(510);
            overflow-x: hidden;
            overflow-y: auto;
            position: absolute;
            top: r(302);
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: r(61);
            box-sizing: border-box;
            //录制内容
            .RecordedContent {
                width: r(506);
                border-radius: r(6);
                border: 2px solid #f4eb7f;
                background: #f8f6e1;
                position: relative;
                .daoJs {
                    position: absolute;
                    top: r(6);
                    right: r(20);
                    font-size: r(36);
                    color: #dc3539;
                }
                .RecordedContent_top {
                    white-space: nowrap;
                    position: relative;
                    vertical-align: top;
                    font-size: 0;
                    text-align: center;
                    .anN {
                        font-size: r(20);
                        width: r(198);
                        text-align: left;
                        font-weight: 500;
                        color: #000000;
                        position: absolute;
                        top: r(24);
                        left: r(12);
                    }
                    .Kais {
                        display: inline-block;
                        div:nth-child(1) {
                            width: r(60);
                            height: r(60);
                            margin: r(36) auto r(16) auto;
                            border-radius: 50%;
                            position: relative;
                            span{
                                position: absolute;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                left: 0;
                                margin: auto;
                                width: r(40);
                                height: r(40);
                                border: 3px solid #FFFFFF;
                                z-index: 1;
                                border-radius: 50%;
                                display: none;
                            }
                            span:nth-child(2){
                                width: r(32);
                                height: r(32);
                                border: 4px solid #dc3539;
                            }
                            span:nth-child(3){
                                width: r(22);
                                height: r(22);
                                border: 5px solid #f4eb7f;
                            }
                            span:nth-child(4){
                                width: r(12);
                                height: r(12);
                                border: 6px solid #dc3539;
                            }
                            img {
                                width: 100%;
                            }
                        }
                        div:nth-child(2) {
                            transform: translateY(-2000px);
                            padding: r(7) r(11);
                            text-align: center;
                            background: #e6252a;
                            border-radius: r(8);
                            font-size: r(15);
                            color: #fff;
                            font-weight: 400;
                            display: none;
                        }
                    }
                }
                .RecordedContent_bottom {
                    margin-top: r(3);
                    p {
                        margin-left: r(12);
                        line-height: r(35);
                        font-size: r(19);
                        color: #000;
                        font-weight: 500;
                    }
                    .content2 {
                        width: r(462);
                        margin: 0 auto;
                        position: relative;
                        .keSr {
                            top: r(6);
                            left: r(12);
                            font-size: r(20);
                            position: absolute;
                            color: #ccc;
                            i {
                                padding: 0 r(6);
                                font-size: r(32);
                            }
                        }
                        textarea {
                            width: r(442);
                            height: r(80);
                            resize: none;
                            padding: r(8) r(8);
                            font-size: r(20);
                            border: 1px solid #dc3539;
                            color: #dc3539;
                            border-radius: r(6);
                        }
                    }
                    .Bf {
                        text-align: center;
                        position: relative;
                        .keSr2 {
                            right: r(12);
                            top: r(0);
                            font-size: r(20);
                            position: absolute;
                            color: orangered;
                            display: none;
                            opacity: 0;
                            i {
                                padding: 0 r(6);
                                font-size: r(32);
                            }
                        }
                        span {
                            display: inline-block;
                            margin: 0 auto;
                            border-radius: r(8);
                            line-height: r(32);
                            padding: 0 r(25);
                            font-size: r(20);
                            color: #dc3539;
                            border: 1px solid #dc3539;
                            font-weight: 500;
                            margin-bottom: r(9);
                        }
                    }
                }
            }
            .content {
                transform: translateX(200%);
                width: 100%;
                margin: r(6) 0;
                font-size: r(12);
                font-weight: 600;
                color: #fff;
                text-align: center;
            }
            //生成情书
            .GenerateaLoveLetter {
                width: r(506);
                border-radius: r(6);
                border: 2px solid #f4eb7f;
                background: #f8f6e1;
                padding-top: r(16);
                text-align: center;
                p {
                    font-weight: 400;
                    width: r(410);
                    margin: 0 auto;
                    font-size: r(16);
                    text-align: justify;
                    color: #000000;
                    line-height: r(28);
                }
                .qingS {
                    display: inline-block;
                    padding: r(0) r(12);
                    height: r(30);
                    margin: 0 auto;
                    margin-top: r(7);
                    line-height: r(30);
                    background: #e6252a;
                    font-size: r(15);
                    border-radius: r(8);
                    color: #fff;
                    margin-bottom: r(14);
                    vertical-align: top;
                }
            }
            .gaoB {
                width: r(402);
                height: r(262);
                margin: 0 auto;
                box-shadow: r(6) r(6) r(35) r(0) #000000;
                position: relative;
                overflow: hidden;
                margin-top: r(76);
                display: none;
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .faS {
                display: none;
                width: r(184);
                height: r(40);
                text-align: center;
                margin: 0 auto;
                line-height: r(40);
                color: #e02d33;
                background: #fff;
                border-radius: r(8);
                font-size: r(22);
                margin-top: r(54);
                font-weight: 600;
            }
        }
        //输入
        .inputting {
            background: #fff;
            width: r(398);
            height: r(234);
            margin: 0 auto;
            margin-top: r(79);
            border-radius: r(10);
            overflow: hidden;
            transform: scale(1);
            display: none;
            .PleaseEnterThe {
                width: r(322);
                height: r(48);
                margin: 0 auto;
                margin-top: r(55);
                position: relative;
                overflow: hidden;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            .input {
                width: r(229);
                height: r(36);
                margin: 0 auto;
                border-radius: r(16);
                margin-top: r(36);
                form {
                    input {
                        vertical-align: top;
                        border-radius: r(16);
                        width: r(176);
                        height: r(36);
                        padding: 0 r(24);
                        border: 1px solid #dd1d21;
                        color: #e72c32;
                        font-size: r(20);
                    }
                }
            }
        }
        //确认
        .confirm {
            display: none;
            width: r(228);
            height: r(48);
            margin: 0 auto;
            margin-top: r(43);
            text-align: center;
            line-height: r(48);
            color: #df3232;
            border-radius: r(14);
            background: #FFFFFF;
            font-size: r(25);
            font-weight: bold;
            transform: translateX(0);
        }
        //---------------------------------------------------------------------
        .raffle {
            width: r(514);
            height: r(215);
            margin: 0 auto;
            margin-top: r(79);
            display: none;
            position: relative;
            overflow: hidden;
            transform: scale(0);
            padding-top: r(20);
            background: url(../img/dh.png) 100%/100% no-repeat;
            white-space: nowrap;
            font-size: 0;
            .img1,
            .img2,
            .img3 {
                width: r(98);
                height: r(191);
                overflow: hidden;
                display: inline-block;
                ul {
                    width: 100%;
                    li {
                        width: r(98);
                        height: r(191);
                        position: relative;
                        overflow: hidden;
                        img {
                            width: 100%;
                            @include imgs;
                        }
                    }
                }
            }
            .img1 {
                margin-left: r(60);
            }
            .img2 {
                margin-left: r(52);
            }
            .img3 {
                margin-left: r(52);
            }
            img {
                width: 100%;
                @include imgs;
            }
        }
        .PickUp,
        .PickUp2 {
            width: r(230);
            height: r(46);
            line-height: r(46);
            text-align: center;
            color: #df3232;
            font-size: r(26);
            font-weight: bold;
            border-radius: r(12);
            margin: 0 auto;
            margin-top: r(60);
            background: #ffffff;
            display: none;
            transform: translateX(500%);
            position: relative;
        }
        .PickUp2 {
            display: none;
            transform: translateX(0);
        }
    }
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: r(81);
        .footer {
            width: r(219);
            height: r(52);
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            transform: translateY(200%);
            img {
                width: 100%;
                @include imgs;
            }
        }
    }
}

.jiangP {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/H5-01.png) 100%/100% no-repeat;
    background-size: 110%;
    display: none;
    .gift {
        margin-top: r(478);
        .gift_box {
            background: #ffffff;
            width: r(398);
            border-radius: r(8);
            margin: 0 auto;
            padding-bottom: r(24);
            .title {
                font-weight: 600;
                font-size: r(26);
                text-align: center;
                color: #dd1d21;
                line-height: r(80);
            }
            .AwardGift {
                width: r(200);
                height: r(102);
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                img {
                    width: 100%;
                    @include imgs;
                }
            }
            p {
                font-size: r(19);
                color: #404040;
                text-align: center;
                margin-top: r(7);
            }
        }
        .ConfirmToReceive {
            width: r(170);
            height: r(40);
            background: #FFFFFF;
            color: #dd1d21;
            line-height: r(40);
            text-align: center;
            margin: 0 auto;
            margin-top: r(34);
            font-size: r(22);
            border-radius: r(12);
            transform: translateX(1000%);
        }
    }
}

.GetTheSuccess,
.GetTheSuccess2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .3);
    background-size: 110%;
    z-index: 11;
    display: none;
    opacity: 0;
    .GetTheSuccess_gift,
    .GetTheSuccess_gift2 {
        margin-top: r(444);
        .GetTheSuccess_gift_box,
        .GetTheSuccess_gift_box2 {
            transform: translateY(-200%);
            font-weight: bold;
            background: #ffffff;
            width: r(426);
            height: r(266);
            border: 3px solid #e02d33;
            border-radius: r(8);
            margin: 0 auto;
            line-height: r(266);
            text-align: center;
            color: #e02d33;
            font-size: r(48);
            padding-bottom: r(24);
        }
    }
}

.ThankYouForYourParticipation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 110%;
    z-index: 11;
    display: none;
    .ThankYouForYourParticipation_GetTheSuccess_gift {
        margin-top: r(480);
        .ThankYouForYourParticipation_GetTheSuccess_gift_box {
            transform: translateY(-200%);
            background: #ffffff;
            width: r(426);
            border-radius: r(6);
            margin: 0 auto;
            padding-bottom: r(34);
            opacity: 0;
            h1 {
                margin-top: r(44);
                font-size: r(55);
                line-height: r(129);
                color: #dd1d21;
                text-align: center;
            }
            p {
                font-weight: 400;
                text-align: center;
                color: #404040;
                font-size: r(24);
            }
        }
    }
}